#@laybase() 
#define main()

#@orderProgress()
<div style="margin-top: 15px;overflow: hidden;">
	<div class="col-md-3">
	#setLocal(tabs=["-","运营商","产品","日期","姓名","进度"])
	#setLocal(attrs=["owner","Operator","product","date","name","step"])
	#@dataTable(tabs,attrs,orderList,"/admin/photoReview")
	</div>
	#@datashowbox()
	<div class="col-md-7">
		<div style="display: none;" id="databox">
			<div style="display: table; width: auto; margin-left: auto; margin-right: auto;">
				#@picview()
			</div>
		</div>
	</div>
	<div class="col-md-2 scrollbox">
		<ul	class="nav well" id="nav-pills">
		</ul>
	</div>
</div>

<script>
	var $imgview = $('#imgview')
	var $source = $('#img_0')
	var $review = $('#review')
	var $iname = $('#iname label')[0]
	var curTarget;
	var lastSonbox = null;
	
	function upDateImg(src,name,state,err){
		//loading动画
		$imgview.children(".loading").show()
		$("input1").hide()
		$source.html("")
		var image = new Image(),
			maxW = $imgview.width(),
			maxH = $imgview.height(),
			imgDom = $("<img />")
		image.src = src
		image.onload = function(){
			var dom = $("<div class='imgbox'></div>")
			dom.css({
				width: $imgview.width(),
				height: $imgview.height()
			})
			dom.iviewer({
                src: src
            });
			$imgview.children(".imgbox").remove()
			$imgview.append(dom)
			$imgview.children(".loading").hide()
		}
		
		image.onerror = function(){
			$imgview.children(".imgbox").remove()
			$imgview.children(".loading").hide()
			_x.show_alert_sh("图片找不到！",false)
		}
		$review.attr("display","none")
		$review.attr("name",name)
		$review.val(err)
// 		if(!_x.isEmpty(err)){
// 			$("#meansp .errtip").show().text(err);
// 		}else{
// 			$("#meansp .errtip").hide().text("");
// 		}
		
		/*if(src!=null&&src!=""){
			var intervalId = setInterval(function(){
				if($img.width()>0){
					if($img.width()>$img.height()){
						$img.attr("width",'600px')
						$img.attr("height",'auto')
						$img.css("margin-top",(600-$img.height())/2+"px")
					}else{
						$img.css("margin-top","auto")
						$img.attr("height",'600px')
						$img.attr("width",'auto')
					}
					$source.zoombie({on:"toggle"})
					$("#meansp").css('display',"")
					updateState(state)
					clearInterval(intervalId)
				}
			}, 100)
		}else{
			$("#meansp").css('display',"none")
		}*/
	}
	$("#btn2,#input1 .cl").on("click",function(){
		if(#("input1").style.display=="none"){
			#("input1").style.display=""
		}else{
			#("input1").style.display="none"
		}
	})
	
	function select(target) {
		curTarget = target
		var newsrc = target.dataset.src
		var name = target.name
		var exp = target.dataset.exp
		var state = target.dataset.state
		var err = target.dataset.err
		//最后一个显示审核通过按钮
		if($(target).hasClass("end-hook")){
			$("#tongguo").show();
		}else{
			$("#tongguo").hide();
		}
		$iname.innerText=exp +"-"+ $(target).text()
		upDateImg(newsrc,name,state,err)
	}
	function updateState(state){
		if (state!=null) {
			$("#err").css("display","none")
			$("#ok").css("display","none")
			if (state=="5") {
				$("#ok").css("display","")
			}else if (state=="3"||state.length>1) {
				$("#err").css("display","")
			}
		}
	}
	function submitMsg(type,btn){
		if(type == 1){
			if(_x.isEmpty($review.val())){
				$review.attr("placeholder","请输入反馈内容！").focus()
				return
			}
		}
		$(btn).button('loading')
		// jquery 表单提交 
		var dataObj = {paramterName:$review.attr("name")};
		if (type == 0) {
			dataObj.state = "5"
		}else{
			dataObj.state = "3"
			dataObj.err = $review.val()
		}
		 $.ajax({
	           type: "POST",
	           url: "/admin/photoMag/1",
	           data: dataObj,
	           success: function(data){
		             if (data.code==1){
			              #("input1").style.display="none"
			              curTarget.dataset.state = dataObj.state
			              if(dataObj.err&&dataObj.err.length>0){
			            	  curTarget.dataset.err = dataObj.err
			              }
			              freshState(curTarget)
			              showNextCollapse($(curTarget))
			              _x.show_alert_sh(data.msg,true)
					}else{
						_x.show_alert_sh(data.msg,false)
					}
		            $(btn).button('reset')
	           },
	           error:function(){
	        	   _x.show_alert_sh("您的网络异常，请稍后重试！",false)
	        	   $(btn).button('reset')
	           }
	        })
		return false
	}
	
	function showNextCollapse(curTarget){
		var nextA = curTarget.next("a");
		curTarget.removeClass("active");
		if(nextA.length < 1){//如果是最后一个
			curTarget.parent().addClass("hide");
			var nextLi = curTarget.parents("li").next("li");
			if(_x.isEmpty(nextA)){
				return;
			}
			nextA = nextLi.children(".sonbox").removeClass("hide").children("a").eq(0);

			if(nextA.length === 0){
				nextA = nextLi.next("li").children(".sonbox").removeClass("hide").children("a").eq(0);
			}
			lastSonbox = nextA.parent();
		}
		nextA.addClass("active");
		if(nextA.length === 0)return
		select(nextA[0]);
	}
	
	function freshState(target){
		var str = "";
		var flg = 0
		$daddy = $(target).parents("li").find("p")
		if (target.dataset.state=="5") {
			str = str+"<span class='glyphicon glyphicon-ok' "+
			"style='color:#00cc33'></span>"+target.innerText
			target.innerHTML = str
			flg = 2
			var mark = true
			$(target).siblings("a").each(function(){
				if($(this)[0].dataset.state != "5"){
					mark = false
					return false
				}
			})
			if(mark){
				$daddy.html("<span class='glyphicon glyphicon-ok' "+
					"style='color:#00cc33'></span>"+$daddy.text())
			}
		}else if(target.dataset.state=="3") {
			str = str+"<span class='glyphicon glyphicon-info-sign' "+
			"style='color:#f0ad4e'></span>"+target.innerText
			target.innerHTML = str
			flg = 1
			$daddy.html("<span class='glyphicon glyphicon-info-sign' "+
					"style='color:#f0ad4e'></span>"+$daddy.text())
		}
		
		
		/*$(target).parents("li").siblings("li").find("a").each(function(idx,el){
			if(el.dataset.state=="5"){
			}else if(el.dataset.state.length > 1){
				flg = 1
			}else{
				flg = flg!=1?0:flg
			}
		})
		if(flg!=0){
			$daddy = $(target).parents("ul").prev("p").children()
			if(flg == 2){
				$daddy.html("<span class='glyphicon glyphicon-ok' "+
						"style='color:#00cc33'></span>"+$daddy.text())
			}else if(flg==1){
				$daddy.html("<span class='glyphicon glyphicon-info-sign' "+
						"style='color:#f0ad4e'></span>"+$daddy.text())
			}
		}*/
	}
	$(function(){
		var ulnav = $("#nav-pills"),
			datashowbox = $("#datashowbox"),//数据统计
			databox = $("#databox");//数据展示层
		/*datashowbox.find("select").change(function(){
			var orderId = $(this).val();
			$.getJSON("/admin/getJson",{type:1,orderId:orderId},function(data){
				datashowbox.hide();
				databox.show();
				console.log(data)
		    	getBaseTab(data,showSuc)
		    	
		    	//默认展开第一张
		    	var nowSon = ulnav.children("li").eq(0).children(".sonbox").removeClass("hide"),
		    		aDom = nowSon.children("a").eq(0).addClass("active");
		    	nowSon.removeClass("hide");
				lastSonbox = nowSon;
				select(aDom[0]);
			})
		})*/
		
		function getJson(type,orderId){
			var params = {
				params: {
					type:type,
					orderId:orderId
				}
			}
			return axios.get("/admin/getJson",params)
		}
		
		
		$("#rtable").on("click","tbody tr",function(){
			if($(this).hasClass("sel"))return;
			var orderId = $(this).data("orderid");
			$(this).addClass("sel").siblings("tr").removeClass("sel");
			$("#err,#ok").hide();
			axios.all([getJson(1,orderId),getJson(7,orderId)])
			.then(axios.spread(function(json1,json2){
				datashowbox.hide();
				databox.show();
		    	console.log(json1.data)
		    	getBaseTab(json1.data,showSuc);
		    	
		    	//默认展开第一张
		    	var nowSon = ulnav.children("li").eq(0).children(".sonbox").removeClass("hide"),
		    		aDom = nowSon.children("a").eq(0).addClass("active");
		    	nowSon.removeClass("hide");
				lastSonbox = nowSon;
				select(aDom[0]);
				
				_com.addMsg(databox,json2.data)
				
				axios.get("/admin/getAllStates")
				.then(function(progress){
					_com.renderOrderProgress(progress.data)
				})
			}))
			
			
		})
		
		//数据渲染完毕做处理
       	function showSuc(){
			//给最后一个添加end-hook
			ulnav.children("li").last().children(".sonbox").children("a").last().addClass("end-hook")
			
			ulnav.children("li").each(function(){
				var mark = -1,
					mark2 = true;
				$(this).find("a").each(function(){
					var state = $(this).data("state");
					if(state == "3"){//有反馈
						mark = false;
						return false;
					}else if(state == "5"){//通过
						mark = true;
					}else if(state == "6"){//反馈重新提交待审核
						mark = mark2 = 6;
						return false;
					}else{//其他
						mark = -1;
						mark2 = false;
					}
				})
				
				if(mark === true && mark2 == true){
					$(this).children("p").prepend("<span class='glyphicon glyphicon-ok' style='color:#00cc33'></span>");
				}else if(mark === false){
					$(this).children("p").prepend("<span class='glyphicon glyphicon-info-sign' style='color:#f0ad4e'></span>");
				}else if(mark === 6 && mark2 === 6){
					$(this).children("p").prepend("<span class='glyphicon glyphicon-time' style='color:#f0ad4e'></span>");
				}
			})
		}
		
		function getBaseTab(data,callback){
			var html = "",
				allLen = 0
			for(var i = 0;i < data.length;i++){
				if(data[i].sonTab.length === 0)continue
				allLen++
				html += "<li><p>"+ data[i].zhExpl +"<i class='iconfont upload' data-upname='"+ data[i].paramterName +"'>&#xe64d;</i></p>";
				var that = data[i],
					sonArr = that.sonTab,
					errs = [],
					sonbox = "<div class='sonbox hide' exp='"+ data[i].zhExpl +"' dirparamter='"+ data[i].paramterName +"'>";
				if(data[i].errs)errs = data[i].errs;
				if(_x.isEmpty(that.value)){//测试完成后删除判断
					for(var j = 0;j < sonArr.length;j++){
						var err = "";
						if(errs.length > j){
							err = errs[j];
						}
						sonbox += "<a name='orderMakepriceCred." +that.paramterName+"_"+j+ "' href='javascript:;' data-state='' data-src='' data-exp='' data-err='"+ err +"'>"+ sonArr[j] +"</a>";
					}
				}else{
					for(var j = 0;j < sonArr.length;j++){
						var state = that.state[j],
							span = "",
							err = "";
						if(errs.length > j){
							err = errs[j];
						}
						if(state == 3){//重新上传
							span = "<span class='glyphicon glyphicon-info-sign' style='color:#f0ad4e'></span>";
						}else if(state == 4){//重新上传完毕
							span = "<span class='glyphicon glyphicon-info-sign' style='color:#f0ad4e'></span>";
						}else if(state == 5){//审核通过
							span = "<span class='glyphicon glyphicon-ok' style='color:#00cc33'></span>";
						}else if(state == 6){//反馈提交待审核
							span = "<span class='glyphicon glyphicon-time' style='color:#f0ad4e'></span>";
						}
						
						sonbox += "<a name='orderMakepriceCred." +that.paramterName+"_"+j+ "' href='javascript:;' data-state='"+ that.state[j] +"' data-src='"+ that.value[j] +"' data-exp='" +that.zhExpl+ "' data-err='"+ err +"'>"+ span + sonArr[j] +"<span class='glyphicon glyphicon-remove del' data-delname='orderMakepriceCred."+ that.paramterName +"_" +j+ "'></span></a>";
					}
					
				}
				sonbox += "</div>";
				html += sonbox + "</li>";
			}
			ulnav.html(html + "<input type='file' accept='image/jpg, image/jpeg, image/png, image/gif' style='display: none;' class='file' multiple='multiple' />");
			if(allLen == ulnav.children("li").length){
	        	callback();
	        }
		}
		
		//点击展开
		$("#nav-pills").on("click","li p",function(){
			var that = $(this);
			if(that.siblings(".sonbox").hasClass("hide")){
				var nowSon = that.siblings(".sonbox");
				nowSon.removeClass("hide");
				if(lastSonbox && lastSonbox != nowSon){
					lastSonbox.addClass("hide");
				}
				lastSonbox = nowSon;
			}else{
				that.siblings(".sonbox").addClass("hide");
				lastSonbox = null;
			}
		})
		
		//显示图片
		var lastA = null;
		$("#nav-pills").on("click","li .sonbox a",function(){
			var that = $(this);
			if(that.hasClass("end-hook")){//最后一个显示审核通过按钮
				$("#tongguo").show();
			}else{
				$("#tongguo").hide();
			}
			if(lastA)lastA.removeClass("active");
			that.addClass("active").siblings("a").removeClass("active");
			select(that[0]);
			lastA = that;
		})
		
		function showNextCollapse(){
			if(index==null){
				index=0
			}else{
				index++
			}
			preOnload(index, index+5)
			var elm = targetArr[index]
			elm.click()
			function floor(el,action){
				if (el.hash!=null) {
					$(el.hash).collapse(action)
					floor($(el.hash))
				}else{
					el.click()
				}
			}
			floor(elm,"show")
		}
		function preOnload(idxStart,idxEnd){
			for (var i = idxStart; i <= idxEnd; i++) {
				if (imgArr[i]!=null&&imgArr[i]!="") {
					var img = new Image()
					img.src = imgArr[i]
				}
			}
		}
		
		//审核通过
		$("#btn3").click(function(){//1车辆照片 2原件照片 3合同照片 4复审
			var $btn = $(this).button('loading')
			axios.get("/admin/checkPhoFinal/2")
			.then(function(res){
				if(res.data.code == "1"){
					_x.show_alert_submit(res.data.msg,true)
				}else{
					_x.show_alert_submit(res.data.msg,false)
				}
				$btn.button('reset')
			})
			.catch(function(){
				$btn.button('reset')
				_x.show_alert_submit("您的网络异常，请稍后重试！",false)
			})
		})
		
		//上传
		ulnav.on("click","i.upload",function(e){
			e.stopPropagation()
			var that = $(this),
				name = that.data("upname")
			ulnav.children("input.file").attr("name",name).click()
		})
		
		ulnav.on("change","input.file",function(){
			var that = $(this),
	            name = that.attr("name"),
	            nowSon = ulnav.find("div.sonbox[dirparamter='"+ name +"']")
	        nowSon.append("<p class='wait'>正在上传...</p>")
	        filesUpLoad(that)
		})
		
		function filesUpLoad (fileInput) {
			var files = fileInput[0].files,
            	name = fileInput.attr("name"),
            	nowSon = ulnav.find("div.sonbox[dirparamter='"+ name +"']"),
            	upNum = 0
			for (var i = 0;i < files.length;i++) {
				var xhr = new XMLHttpRequest(),
            		formData = new FormData()
				formData.append(name,files[i]);
				xhr.open("post","/admin/submitFilesByField",true);
		        xhr.nowSon = nowSon
		        xhr.addEventListener("load",function(){
		            var result = JSON.parse(this.response);
		            console.log(result)
		            if (result.code == 1) {
		            	var count = this.nowSon.children("a").length + 1,
		            		exp = this.nowSon.attr("exp"),
		            		imageHtml = "<a name='orderMakepriceCred." +name+"_"+ (count - 1) + "' data-exp='"+ exp +"' data-src='"+ result.src +"' href='javascript:;'>"+ count +"<span class='glyphicon glyphicon-remove del' data-delname='orderMakepriceCred."+ name +"_" + (count - 1) + "'></span></a>" 
		            	this.nowSon.append(imageHtml)
		            }else{
		            	_x.show_alert_sh("上传失败,请检查您的网络！",false)
		            }
		            upNum++
		            if (upNum === files.length) {
		            	this.nowSon.children("p.wait").remove()
		            }
		        })
		        
		        xhr.addEventListener('error',function(e){
	            	_x.show_alert_sh("上传失败,请检查您的网络！",false)
	            	upNum++
	            	if (upNum === files.length) {
		            	this.nowSon.children("p.wait").remove()
		            }
	            });
	            
	            xhr.send(formData);
			}
		}
		
		//删除
		ulnav.on("click","span.del",function(e){
			e.stopPropagation()
			var that = $(this),
				delname = that.data("delname"),
				option = {
					isShowBg: false,
					text: "您真的要删除吗？",
					fn: function(modalDom,btn,callback){
						axios.get("/admin/deletePhotoByField",{
							params: {
								paramterName: delname
							}
						})
						.then(function(res){
							if(res.data.code == 1){
								that.parent().remove()
								_x.show_alert_sh("删除成功！",true)
								callback()
							}else{
								btn.button('reset')
								_x.show_alert_sh(res.data.msg,false)
							}
						})
						.catch(function(){
							_x.show_alert_sh("删除失败！",false)
							btn.button('reset')
						})
					}
				}
			_x.show_alert_confirm(option)
		})
	})
</script>
#end
